/**
 * Created by lixin on 2019-11-20
 * 购物车已添加商品组件
 * 展示商品基本信息
 *
 */
import Taro, {Component} from '@tarojs/taro'
import {Checkbox, Image, Text, View} from '@tarojs/components'
/**
 * 由于 app.js 添加的样式文件 在小程序上只能影响 page 样式,不能影响 component 的样式，所以在使用自定义组件时，你可能需要再次引入
 */
import 'taro-ui/dist/style/components/flex.scss'
import './shopping.less'
import {AtIcon, AtInputNumber, AtTag} from "taro-ui";


export default class Shopping extends Component {

  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {

    const _url = 'http://storage.360buyimg.com/mtd/home/32443566_635798770100444_2113947400891531264_n1533825816008.jpg'

    return (
      <View className='shopping-item'>
        <Checkbox className='shopping-item-checkbox' value='选中' color='red' checked={false}/>
        <View className='shopping-item-info'>
          <Image
            src={_url}
            alt=''
            className='project-img'
            mode='aspectFit'
            lazyLoad={true}
          />
          <View className='shopping-item-text'>
            <Text className='shopping-item-title'>
              Apple iPad Pro 11英寸平板电脑 20 18款（64G WLAN版/全面屏/A12...
            </Text>
            <View className='at-row'>
              <View className='at-col'>
                <AtTag size='small'>
                  深空灰色，WLAN版64G
                  <AtIcon value='chevron-down' size='10' color='#333'/>
                </AtTag>
              </View>
              <View className='at-col' style={{textAlign: "right"}}>
                <AtTag size='small'>
                  选服务
                  <AtIcon value='chevron-right' size='10' color='#333'/>
                </AtTag>
              </View>
            </View>
            <Text className='shopping-item-small-title'>
              秒杀中，22小时候结束
            </Text>
            <View className='at-row'>
              <View className='at-col'>
                <Text className='shopping-item-amount'>
                  <Text className='shopping-item-icon'>￥</Text>
                  5999.00
                </Text>
              </View>
              <View className='at-col' style={{textAlign: "right"}}>
                <AtInputNumber
                  width={60}
                  min={0}
                  max={10}
                  step={1}
                  value={1}
                />
              </View>
            </View>

          </View>
        </View>
      </View>
    )
  }
}
